<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>
<style>
  .dashboard_setup .title-span {
    padding: 0px 8px;
  }

  .dashboard_setup .menu-div {
    width: 100%;
    display: inline-table;
  }

  .dashboard_setup .menu-div-btn {
    text-align: right;
  }
</style>
<template>
  <div class="dashboard_setup">
    <Card>
      <p slot="title">
        <Icon type="person"></Icon>
        个人应用
        <span v-if="dashboard_person_arr.length > 0">
          （<span class="title-span" v-for="el in dashboard_person_arr"
                 v-text="dashboard_person_all[el] ? dashboard_person_all[el].name : el"></span>）
        </span>
      </p>
      <div style="min-height: 200px;">
        <div class="menu-div">
          <Col :sm="6" :md="6" :lg="6" :style="{marginBottom: '10px'}" v-for="(el,index) in dashboard_person_all"
               :key="'person_' + index" style="padding: 0px 6px;">
          <infor-card
              @clickFunction="checked_fun_person(el.id, el.name)"
              :id-name="el.id"
              :end-val="end_val"
              :iconType="el.iconType"
              :color="dashboard_person_arr.indexOf(el.id) > -1 ? el.color : '#c1c1c1'"
              :intro-text="el.name"
          ></infor-card>
          </Col>
        </div>
        <div class="menu-div menu-div-btn">
          <Button type="primary" style="width: 100px;" :loading="save_loading" @click="save_person">保存</Button>
        </div>
      </div>
    </Card>
    <Card style="margin-top: 10px;" v-if="is_leadership == true">
      <p slot="title">
        <Icon type="person"></Icon>
        部门应用
        <span v-if="dashboard_department_arr.length > 0">
          （<span class="title-span" v-for="el in dashboard_department_arr"
                 v-text="dashboard_department_all[el] ? dashboard_department_all[el].name : el"></span>）
        </span>
      </p>
      <div style="min-height: 200px;">
        <div class="menu-div">
          <Col :sm="6" :md="6" :lg="6" :style="{marginBottom: '10px'}" v-for="(el,index) in dashboard_department_all"
               :key="'department_' + index" style="padding: 0px 6px;">
          <infor-card
              @clickFunction="checked_fun_department(el.id, el.name)"
              :id-name="el.id"
              :end-val="end_val"
              :iconType="el.iconType"
              :color="dashboard_department_arr.indexOf(el.id) > -1 ? el.color : '#c1c1c1'"
              :intro-text="el.name"
          ></infor-card>
          </Col>
        </div>
        <div class="menu-div menu-div-btn">
          <Button type="primary" style="width: 100px;" :loading="save_loading" @click="save_department">保存</Button>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
  import inforCard from './components/inforCard.vue';
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  export default {
    components: {
      inforCard
    },
    data () {
      return {
        end_val: 0,
        save_loading: false,
        is_leadership: false,//领导
        dashboard_person_arr: [],
        dashboard_department_arr: [],
        dashboard_person_all: {
          'taskList': {
            id: 'taskList',
            name: '我的任务',
            color: '#f25e43',
            iconType: 'ios-eye',
          },
          'task_delayed': {
            id: 'task_delayed',
            name: '我的延期任务',
            color: '#f44336',
            iconType: 'ios-eye',
          },
          'apply': {
            id: 'apply',
            name: '我的申办',
            color: '#4caf50',
            iconType: 'ios-eye',
          },
          'calendar': {
            id: 'calendar',
            name: '我的日程',
            color: '#f25e43',
            iconType: 'ios-eye',
          },
          'approval': {
            id: 'approval',
            name: '我的审批',
            color: '#ffd572',
            iconType: 'ios-eye',
          },
          'knowledgeRepo': {
            id: 'knowledgeRepo',
            name: '我的知识库',
            color: '#e91e63',
            iconType: 'ios-eye',
          },
        },
        dashboard_department_all: {
          'task': {
            id: 'task',
            name: '部门任务',
            color: '#2d8cf0',
            iconType: 'ios-podium-outline',
          },
          'task_delayed': {
            id: 'task_delayed',
            name: '部门延期任务',
            color: '#2d8cf0',
            iconType: 'ios-podium-outline',
          },
          'apply': {
            id: 'apply',
            name: '部门申办',
            color: '#2d8cf0',
            iconType: 'ios-podium-outline',
          },
          'schedule': {
            id: 'schedule',
            name: '部门日程',
            color: '#2d8cf0',
            iconType: 'ios-podium-outline',
          },
          'approval': {
            id: 'approval',
            name: '部门审批',
            color: '#2d8cf0',
            iconType: 'ios-podium-outline',
          },
          'knowledge': {
            id: 'knowledge',
            name: '部门知识库',
            color: '#2d8cf0',
            iconType: 'ios-podium-outline',
          },
          'published': {
            id: 'published',
            name: '部门发表',
            color: '#2d8cf0',
            iconType: 'ios-podium-outline',
          },
          'checking_in': {
            id: 'checking_in',
            name: '部门考勤',
            color: '#2d8cf0',
            iconType: 'ios-podium-outline',
          },
        },
      };
    },
    created: function () {
      var _this = this;
      _this.is_leadership = Utils.is_leadership();
    },
    mounted () {
      var _this = this;
      _this.getSetup_person();
      if (_this.is_leadership) {
        _this.getSetup_department();
      }
    },
    methods: {
      // 个人
      getSetup_person () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          type: 'person',
        };
        var params = {
          url: '/dashboard/storage',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data;
            if (!data.length > 0) {
              data = Util.constant.dashboard_person;
            }
            _this.dashboard_person_arr = data;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      checked_fun_person: function (id, name) {
        var _this = this;
        var dashboard_person_arr = _this.dashboard_person_arr;
        if (dashboard_person_arr.indexOf(id) > -1) {//存在的
          for (var k in dashboard_person_arr) {
            if (!dashboard_person_arr[k]) {
              continue;
            }
            if (dashboard_person_arr[k] == id) {
              dashboard_person_arr.splice(k, 1);
            }
          }
        } else {
          if (dashboard_person_arr.length == 4) {
            _this.$Message.error('最多只能显示4个!');
          } else {
            dashboard_person_arr.push(id);
          }
        }
        _this.dashboard_person_arr = dashboard_person_arr;
      },
      save_person: function () {
        var _this = this;
        var dashboard_person_arr = _this.dashboard_person_arr;
        _this.saveInfoAjax('person', dashboard_person_arr);
      },
      // 部门
      getSetup_department () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          type: 'department',
        };
        var params = {
          url: '/dashboard/storage',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data;
            if (!data.length > 0) {
              data = Util.constant.dashboard_department;
            }
            _this.dashboard_department_arr = data;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      checked_fun_department: function (id, name) {
        var _this = this;
        var dashboard_department_arr = _this.dashboard_department_arr;
        if (dashboard_department_arr.indexOf(id) > -1) {//存在的
          for (var k in dashboard_department_arr) {
            if (!dashboard_department_arr[k]) {
              continue;
            }
            if (dashboard_department_arr[k] == id) {
              dashboard_department_arr.splice(k, 1);
            }
          }
        } else {
          if (dashboard_department_arr.length == 4) {
            _this.$Message.error('最多只能显示4个!');
          } else {
            dashboard_department_arr.push(id);
          }
        }
        _this.dashboard_department_arr = dashboard_department_arr;
      },
      save_department: function () {
        var _this = this;
        var dashboard_department_arr = _this.dashboard_department_arr;
        _this.saveInfoAjax('department', dashboard_department_arr);
      },
      // 保存
      saveInfoAjax (type, data) {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          type: type,
          data: data,
        };
        var params = {
          url: '/dashboard/add',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.save_loading = true;
        function _successFun(res) {
          _this.save_loading = false;
          if (res.result == 0) {
            _this.$Message.success('保存成功!');
          } else {
            _this.$Message.error('保存失败!');
          }
        }
      },

    }
  };
</script>
